<template>
  <div class="car-container">
    <div @click="hideCar" style="height: 100%"></div>

    <div class="car">
      <div class="top">
        <div class="title">购物车</div>
        <div class="clear" @click="clear">清空</div>
      </div>
      <div class="foods" v-if="$store.getters.showAll.length === 0 ? false : true">
        <div class="food" v-for="item in $store.getters.showAll" :key="item.name">
          <div class="name">{{ item.name }}</div>
          <div class="num">
            <div class="price">￥{{ item.price }}</div>
            <div class="icon-remove_circle_outline" @click="remove(item.name)"></div>
            <div class="number">{{ item.num }}</div>
            <div class="icon-add_circle" @click="add(item.price, item.name)"></div>
          </div>
        </div>
      </div>
      <div class="nothing" v-else>
        购物车什么也没有(ノへ￣、)
      </div>
    </div>

    <div></div>
  </div>
</template>

<script>
import layer from '../lib/layer.mobile-v2.0/layer_mobile/layer.js'
import '../lib/layer.mobile-v2.0/layer_mobile/need/layer.css'
export default {
  name: 'CarBlock',
  data () {
    return {}
  },
  methods: {
    hideCar () {
      this.$emit('appfunc')
    },
    add (price, name) {
      this.$store.commit('add', {price, name})
    },
    remove (name) {
      this.$store.commit('remove', name)
    },
    clear () {
      if (this.$store.getters.showAll.length === 0) return
      layer.open({
        content: '是否清空购物车？',
        btn: ['确定', '取消'],
        shadeClose: false,
        yes: (index) => {
          // console.log('yes')
          this.$store.commit('clear')
          layer.close(index)
        },
        no: () => {
          // console.log('no')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .car-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    z-index: 200;

    .car {
      position: absolute;
      bottom: 1.2rem;
      left: 0;
      width: 100%;

      .top {
        padding: 0 0.36rem;
        height: 1rem;
        line-height: 1rem;
        width: 100%;
        background-color: #f3f5f7;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          font-size: 0.32rem;
          font-weight: 200;
          color: rgb(7, 17, 27);
        }

        .clear {
          font-size: 0.3rem;
          color: rgb(0, 160, 220);
        }
      }

      .foods {
        background-color: #fff;
        padding-bottom: 0.5rem;

        .food {
          margin: 0 0.36rem;
          height: 1.2rem;
          line-height: 1.2rem;
          border-bottom: 1px solid #ccc;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .name {
            font-size: 0.38rem;
            color: rgb(7, 17, 27);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .num {
            display: flex;
            align-items: center;
            justify-content: unset;
            text-align: center;
            font-size: 0.38rem;

            .price {
              width: 1.2rem;
              color: rgb(240, 20, 20);
            }

            .icon-remove_circle_outline {
              font-size: 0.5rem;
              color: rgb(0, 160, 220);
            }

            .number {
              width: 0.8rem;

              color: rgb(147, 153, 159);
            }

            .icon-add_circle {
              font-size: 0.5rem;
              color: rgb(0, 160, 220);
            }
          }
        }
      }

      .nothing {
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        background-color: #fff;
        font-size: 0.48rem;
        text-align: center;
      }
    }
  }

</style>
